<template>
  <view class="attr-selector">
    <block v-for="(key, index) in attributes" :key="index">
      <view class="key">{{ key.key }}</view>
      <view class="values">
        <block v-for="value in key.attribute_values" :key="value.id">
          <view class="item">
            <block v-if="value.is_unselectable">
              <button class="button disable" size="mini" plain="true" :disabled="true" >{{ value.value }}</button>
            </block>
            <block v-else>
              <button v-if="isSelectedValue(value.id)" @click="selectValue(key.id, value.id, true)" class="button active" size="mini" plain="true">{{ value.value }}</button>
              <button v-else @click="selectValue(key.id, value.id)" class="button" size="mini" plain="true">{{ value.value }}</button>
            </block>
          </view>
        </block>
      </view>
    </block>
  </view>
</template>

<script>
import _ from "lodash";
import store from "store";
import { mapGetters, mapActions } from 'vuex'

export default {
  name: "ProductAttributeSelectorCom",
  store,
  computed: {
    ...mapGetters([
      'attributes',
      'selectedAttributeValues',
			'product'
    ])
  },
  methods: {
    ...mapActions(['refreshAttributes']),
    isSelectedValue(valudId) {
      return _.includes(this.selectedAttributeValues, valudId)
    },
    async selectValue(keyId, valueId, isCancel = false) {
      await this.refreshAttributes({keyId: keyId, valueId: valueId, isCancel})
    }
  },
	created() {
		
	},
	mounted() {
		if(this.product.is_gold_bean){
			if(!this.isSelectedValue(this.attributes[0].attribute_values[0].id)){
				this.selectValue(this.attributes[0].id, this.attributes[0].attribute_values[0].id, false)
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.attr-selector {
  .key {
    font-size: 30rpx;
    margin: 15rpx 0;
  }
  .values {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    .item {
      .button {
        width: auto;
        height: 48rpx;
        line-height: 48rpx;
        background: #F5F5F5;
        border: 1px #CCCCCC solid;
        border-radius: 24rpx;
        font-size: 24rpx;
        margin-right: 20rpx;
      }
      .active {
        border: none;
        background: linear-gradient(137deg, #FFBB41 0%, #FF9235 100%);
      }
      .disable {
        border: 1px #CCCCCC dashed;
      }
    }
  }
}
</style>
